<template>
  <div class="about">
    <Header></Header>
    <div class="banner">
      <img src="http://47.113.189.57:5000/about.jpg" alt="">
    </div>
    <div class="body-main">
      
      <div class="about-me">
        <img src="../assets/img/1.jpg" alt="">
        <div class="about-title">
          <h1>关于我</h1>
          <span>一只学习中的萌新</span>
        </div>
        <div class="about-intrduce">
          <ul>
            <li><strong> 姓名：</strong>米斯特 · 陈</li>
            <li><strong>爱好：</strong> 阅读、写Bug、打游戏、看动漫、网上冲浪</li>
            <li><strong>近期想做的事：</strong> 飞无人机</li>
          </ul>
          <span>Hi，我是米斯特 · 陈，一个学习中的前端程序员。目前主要写的是Vue，喜欢逛逛掘金，看看上面的有趣故事、新颖知识，也喜欢发发自己写的一些微末的小知识。看到好看的东西的时候也喜欢用掘金的插件（闪念笔记）直接记下来……</span>
          <span>我也喜欢看书，书上的文字总能引导我去想象，虽然嘴里蹦不出多少墨水……</span>
          <span>我深怕自己本非美玉，故而不敢加以刻苦琢磨，却又半信自己是块美玉，故又不肯庸庸碌碌，与瓦砾为伍。于是我渐渐地脱离凡尘，疏远世人，结果便是一任愤懑与羞恨日益助长内心那怯弱的自尊心。其实，任何人都是驯兽师，而那野兽，无非就是各人的性情而已。--《山月记》</span>
          <span>除此之外，近期我最想做的事是玩玩无人机，想自己操纵无人机去拍摄家乡的山水、想在外出游玩的时候把一切美好记录下来、想看到不一样的风景……</span>
        </div>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>


<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

export default {
  name: 'AboutView',
  components: {
    Header,
    Footer,
  }
}
</script>

<style lang="scss" scoped>  
.about{
  background-color: var(--main-bg);
  .banner{
  min-height: 100px;
  height: 500px;
  
  overflow: hidden;
  >img{
    width: 100%;
    margin-top: -10%;
    min-width: 1300px;
  }
  // background: url('http://47.113.189.57:5000/about.jpg') no-repeat;
  // background-size: cover;
  // background-position: center -295px;
}
  .body-main{
    >.about-me{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: var(--main-color);
      >img{
        transition: transform .3s;
        border-radius: 50%;
        width: 18%;
        min-width: 5em;
        margin: 0 auto;
        &:hover{
          transform: rotate(360deg);
        }
      }
      >.about-title{
        display: flex;
        flex-direction: column;
        margin-bottom: 1em;
        >h1{
          margin-bottom: 1em;
        }
        >span{
          font-size: 1.1em;
        }
      }
      >.about-intrduce{
        font-size: 1.2em;
        >ul{
          margin-bottom: 1em;
          >li{
            list-style: disc;
          }
        }
        >span{
          display: inline-block;
          margin-bottom: 1em;
        }
      }
    }
  }
}

</style>